<template>
    <el-avatar shape="square" :size="100" :src="props.modelValue" @click="drawer = true">
        <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="">
    </el-avatar>

    <el-drawer
        v-model="drawer"
        title="我的图库"
        direction="ttb"
        size="40%"
    >
        <el-upload 
            v-model:file-list="fileList"
            list-type="picture-card" 
            :auto-upload="false"
            :on-change="onChange"
        >
            <el-icon><Plus /></el-icon>

            <template #file="{ file }">
                <div>
                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                    <span class="el-upload-list__item-actions">
                        <span
                            class="el-upload-list__item-preview"
                            @click="getImgurl(file.url)"
                        >
                            <el-icon><zoom-in /></el-icon>
                        </span>
                    </span>
                </div>
            </template>
        </el-upload>
    </el-drawer>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { uploadApi } from "@/api"

const drawer = ref(false)
const imgurl = ref("")
const fileList = ref<any[]>([
    {
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },
])

const onChange = (uploadFile: any, uploadFiles: any) => { 
    console.log("uploadFile==", uploadFile,"uploadFiles==", uploadFiles);
    let name = uploadFile.name
    console.log(name);
    let file = uploadFile.raw
    let reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => { 
        console.log(reader.result);
        CallUploadApi(name, reader.result)
    }
}

onMounted(() => {
    CallUploadList()
})

const CallUploadList = () => { 
    uploadApi.imglist.call().then((res: any) => { 
        console.log(res);
        fileList.value = res
    })
}

const CallUploadApi = (name: any, base64: any) => { 
    console.log(name, base64);
    uploadApi.upload.call({ name: name, base64: base64 }).then((res: any) => { 
        console.log(res);
    })
}

const props = defineProps({
    modelValue: {
        type: String,
        default: ''
    }
})

const emit = defineEmits(['update:modelValue'])

const getImgurl = (file: any) => {
    emit('update:modelValue', file)
    drawer.value = false
}
</script>

<style scoped>
.el-upload-list__item-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.el-upload-list__item-actions {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.2s;
}

.el-upload-list__item:hover .el-upload-list__item-actions {
    opacity: 1;
}

.el-upload-list__item-preview {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}
</style>